<template>
  <PageContainer>
    <view class="container">
      <Header title="活动管理" :is-box-shadow="false" v-model="headerHeight"></Header>
      <view class="header-container">
        <view class="statistics-container">
          <view class="statistics-box">
            <view class="title">活动数据总览</view>
            <view class="statistics">
              <StatisticsItem
                :activity-type="activityCountInfo?.activityType"
                :number="activityCountInfo?.browseNumByCurrentTenant"
                title="浏览次数"
                unit="次"
                :to-day="activityCountInfo?.todayBrowseNumByCurrentTenant"
              ></StatisticsItem>

              <StatisticsItem
                :activity-type="activityCountInfo?.activityType"
                :number="activityCountInfo?.browsePeopleNumByCurrentTenant"
                title="浏览人数"
                unit="人"
                :to-day="activityCountInfo?.todayBrowsePeopleNumByCurrentTenant"
              ></StatisticsItem>
              <StatisticsItem
                :activity-type="activityCountInfo?.activityType"
                :number="activityCountInfo?.registerNumByCurrentTenant"
                :to-day="activityCountInfo?.todayRegisterNumByCurrentTenant"
                title="申请报名"
                unit="人"
              ></StatisticsItem>
            </view>
            <view class="statistics">
              <StatisticsItem
                :activity-type="activityCountInfo?.activityType"
                :number="activityCountInfo?.passedNumByCurrentTenant"
                title="成功报名"
                unit="人"
              ></StatisticsItem>
              <StatisticsItem
                :activity-type="activityCountInfo?.activityType"
                :number="activityCountInfo?.registerSignNumByCurrentTenant"
                title="已签到"
                unit="人"
              ></StatisticsItem>

              <StatisticsItem
                :activity-type="activityCountInfo?.activityType"
                :number="activityCountInfo?.cancelRegisterPassedNumByCurrentTenant"
                title="取消报名"
                unit="人"
              ></StatisticsItem>
            </view>
          </view>
        </view>
      </view>

      <view
        class="nav-box"
        :style="{
          'grid-template-columns':
            activityCountInfo?.activityType === ActivityTypeEnum.oneself &&
            activityCountInfo.biconfigStatus
              ? 'repeat(4, 1fr)'
              : 'repeat(3, 1fr)',
        }"
      >
        <view @click="toExamine">
          <view class="icon-bg examine">
            <text class="ali-icon icon-shenhe1"></text>
            <view
              v-if="
                activityCountInfo &&
                activityCountInfo.applyReviewNum &&
                activityCountInfo.activityType === ActivityTypeEnum.oneself
              "
              :class="['badge-dot', activityCountInfo.applyReviewNum > 99 && 'badge-dot__max']"
            >
              <text>
                {{
                  activityCountInfo.applyReviewNum > 99 ? '99+' : activityCountInfo.applyReviewNum
                }}
              </text>
            </view>
          </view>
          <text class="text">申请审核</text>
        </view>
        <view @click="toInvitationRanking">
          <view class="icon-bg rank">
            <text class="ali-icon icon-paihang"></text>
          </view>

          <text class="text">邀请排行</text>
        </view>
        <view @click="toActivityBrowsingHistory">
          <view class="icon-bg brows">
            <text class="ali-icon icon-liulanjilu"></text>
          </view>

          <text class="text">浏览记录</text>
        </view>
        <view
          v-if="
            activityCountInfo?.activityType === ActivityTypeEnum.oneself &&
            activityCountInfo.biconfigStatus
          "
          @click="toActivityBigScreenManagement"
        >
          <view class="icon-bg daping">
            <text class="ali-icon icon-daping"></text>
          </view>

          <text class="text">大屏管理</text>
        </view>
      </view>

      <view class="tabs-box" :style="{ top: headerHeight + 'px' }">
        <view class="tab">
          <Tabs v-model="currentTab" background-color="#FFF" :isScrollTop="false">
            <TabNav tabBarColor="#2878FF" />
            <template v-if="tabsData?.length">
              <TabsItem
                v-for="(item, index) in tabsData"
                @click="handleTabClick"
                :key="index"
                :name="item.title"
                :value="item.id"
              ></TabsItem>
            </template>
          </Tabs>
        </view>
        <view class="search-box">
          <view class="t-search-box">
            <TSearch @confirm="handleTSearch" placeholder="搜索姓名/单位/手机号"></TSearch>
          </view>
          <text
            class="ali-icon icon-shaixuan1 icon-style"
            style="font-size: 40rpx; color: #ccccc8"
            @click="filterDrawerRef?.handleOpen()"
          ></text>
        </view>
      </view>

      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length >= 1"
        :isPullDownRefres="false"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="content">
            <PresonItem
              :data="v"
              :currentTab="currentTab"
              :activity-type="activityCountInfo?.activityType"
              @click="handlePresonItemClick(v)"
              @refresh="refresh"
              @show-printer-popup="handleShowPrinterPopup(v)"
            ></PresonItem>
          </view>
        </template>
      </Paglist>
    </view>
    <FilterDrawer ref="filterDrawerRef" @ok="handleFilterDrawerOk"></FilterDrawer>
    <SelectPrinter v-if="activityId" ref="selectPrinterRef" :activity-id="activityId" />
  </PageContainer>
</template>

<script lang="ts" setup>
  /* activityPersonManage 活动管理 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { computed, provide, ref } from 'vue';
  import PresonItem from './components/PresonItem.vue';
  import FilterDrawer from './components/FilterDrawer.vue';
  import { navigateTo, onLoad } from '@/router';
  import { getActivityCountInfo, getActivityRegisterList } from '@/api/activity';
  import SelectPrinter from '../../components/SelectPrinter.vue';
  import StatisticsItem from './components/StatisticsItem.vue';
  import type {
    IActivityCountInfo,
    IActivityRegister,
    IActivityRegisterQuery,
  } from '@/api/activity/types';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { ApprovalStatusEnum, SignStatusEnum, ActivityTypeEnum } from '@/enums/activityStatusEnum';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import type { FunctionArgs } from '@vueuse/core';

  const activityId = ref<number>();
  let success: FunctionArgs | null = null;
  onLoad<'activityPersonManage'>(async (op) => {
    activityId.value = op.activityId;
    parame.value.activityId = op.activityId;
    success = op.success;
    await queryActivityCountInfo();
    await refresh();
  });

  const headerHeight = ref(0);

  // 统计

  const currentTab = ref(0);
  const activityCountInfo = ref<IActivityCountInfo>();
  const tabsData = ref<
    {
      title: string;
      id: number;
      queryData: { signStatus: number | undefined; approvalStatusList: number[] | undefined };
    }[]
  >([
    {
      title: '成功报名',
      id: 0,
      queryData: {
        signStatus: undefined,
        approvalStatusList: [ApprovalStatusEnum.PASSED],
      },
    },
    {
      title: '已签到',
      id: 1,
      queryData: {
        signStatus: SignStatusEnum.YES_SIGN,
        approvalStatusList: undefined,
      },
    },
    {
      title: '未签到',
      id: 2,
      queryData: {
        signStatus: SignStatusEnum.NO_SIGN,
        approvalStatusList: [ApprovalStatusEnum.PASSED],
      },
    },
    {
      title: `取消/驳回`,
      id: 3,
      queryData: {
        signStatus: undefined,
        approvalStatusList: [ApprovalStatusEnum.CANCEL, ApprovalStatusEnum.REJECT],
      },
    },
  ]);
  const queryActivityCountInfo = async () => {
    activityCountInfo.value = await getActivityCountInfo(activityId.value as number);
  };

  // 列表

  const [register, { refresh }] = useConList();
  const dataList = ref<IActivityRegister[]>([]);
  const parame = ref<IActivityRegisterQuery>({
    activityId: 0,
    keyWord: '',
    approvalStatusList: [ApprovalStatusEnum.PASSED],
    signStatus: undefined,
    identity: undefined,
  });

  const handleTSearch = (keyWord: string) => {
    parame.value.keyWord = keyWord;
    refresh();
  };

  const handleTabClick = () => {
    const { approvalStatusList, signStatus } = tabsData.value![currentTab.value].queryData;
    parame.value.approvalStatusList = approvalStatusList;
    parame.value.signStatus = signStatus;
    parame.value.identity = undefined;
    refresh();
  };

  const filterDrawerRef = ref<InstanceType<typeof FilterDrawer>>();
  const handleFilterDrawerOk = (data: { groupField: string; id: number }[]) => {
    parame.value.identity = data?.find((item) => item.groupField === 'identity')?.id;
    refresh();
  };
  provide('api', async (obj: IActivityRegisterQuery) => {
    const res = await getActivityRegisterList(obj);
    return res;
  });

  const toExamine = () => {
    navigateTo({
      name: 'applyForExamine',
      options: {
        activityId: activityId.value!,
        success: () => {
          queryActivityCountInfo();
          refresh();
          success?.();
        },
      },
    });
  };

  const toActivityBrowsingHistory = () => {
    navigateTo({
      name: 'activityBrowsingHistory',
      options: {
        activityId: activityId.value!,
      },
    });
  };

  const handlePresonItemClick = (v: IActivityRegister) => {
    navigateTo({
      name: 'signUpDetail',
      options: {
        activityRegister: { ...v, activityId: activityId.value as number },
        success: () => {
          queryActivityCountInfo();
          refresh();
          success?.();
        },
      },
    });
  };

  const toInvitationRanking = () => {
    navigateTo({
      name: 'invitationRanking',
      options: {
        activityId: activityId.value!,
      },
    });
  };

  const toActivityBigScreenManagement = () => {
    navigateTo({
      name: 'bigScreenManagement',
      options: {
        activityId: activityId.value!,
      },
    });
  };

  const selectPrinterRef = ref<{ show: (registerId: number) => void }>();
  function handleShowPrinterPopup(item: IActivityRegister) {
    selectPrinterRef.value?.show(item.id);
  }

  onPullDownRefresh(async () => {
    await queryActivityCountInfo();
    await refresh();
  });
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    // background-color: #fff;
    .header-container {
      background-color: #ffffff;
      .statistics-container {
        padding: 32rpx;
        .statistics-box {
          display: flex;
          flex-direction: column;
          background-image: linear-gradient(to right, #2878ff, #2878ff);
          border-radius: 32rpx;
          .title {
            color: #fff;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx;
            margin-top: 24rpx;
            margin-left: 32rpx;
          }
          .statistics {
            padding: 32rpx;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
    .tabs-box {
      margin-top: 24rpx;
      position: sticky;
      background-color: #ffffff;
      z-index: 999;

      .search-box {
        display: flex;
        gap: 32rpx;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 32rpx;

        .t-search-box {
          height: 72rpx;
          flex: 1;
        }
      }
    }

    .nav-box {
      display: grid;

      background-color: #ffffff;
      padding: 16rpx 32rpx;
      .examine {
        background: #fef5ec;
        .ali-icon {
          color: #f0aa67;
        }
      }

      .rank {
        background: #eff2fe;
        .ali-icon {
          color: #2878ff;
        }
      }

      .brows {
        background: #eff2fe;
        .ali-icon {
          color: #3f72f6;
        }
      }
      .daping {
        background: #eff2fe;
        .ali-icon {
          color: #28b082;
        }
      }
      & > view {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        padding: 16rpx 0;

        .icon-bg {
          position: relative;
          width: 64rpx;
          height: 64rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          .ali-icon {
            font-size: 40rpx;
          }
          .badge-dot {
            position: absolute;
            top: -10%;
            right: -20%;
            width: 32rpx;
            height: 32rpx;
            background-color: #ea5e0e;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 32rpx;
            font-size: 16rpx;
            box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
            &__max {
              border-radius: 24rpx;
              width: auto;
              padding: 0 8rpx;
            }
          }
        }
        .text {
          color: #323233;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
        }
      }
    }
    ::v-deep .list-box {
      display: flex;
      flex-direction: column;
      padding: 24rpx;
      gap: 16rpx;
    }
  }
</style>
